<!DOCTYPE html>
<html lang="en">
<head>
    <title>登录页面</title>
    <style>
        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }
        .form {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 300px;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .form label,
        .form input[type="text"],
        .form input[type="password"],
        .form input[type="submit"] {
            margin-bottom: 10px;
        }
        .form .input-group {
            display: flex;
            flex-direction: row;
            align-items: center;
            width: 100%;
        }
        .form .input-group label {
            width: 30%;
            text-align: left;
        }
        .form .input-group input {
            width: 70%;
        }
        .form .submit-button {
            display: flex;
            justify-content: center;
            width: 100%;
            margin-top: 10px;
        }
    </style>

    <script src="/static/js/common-header.js"></script>
</head>
<body>
    <div class="container">
        <form id = "loginFormId" class="form" action="/login" method="post">
            <div class="input-group">
                <label for="username">账号：</label>
                <input type="text" id="username" name="username">
            </div>
            <div class="input-group">
                <label for="password">密码：</label>
                <input type="password" id="password" name="password">
            </div>
            <div class="submit-button">
                <input type="submit" value="登录">
            </div>
        </form>
    </div>


    <!--引入彩带效果，源码见 https://github.com/zproo/canvas-ribbon -->
    <script id="ribbon" src="/static/js/canvas_ribbon.js"></script>

    <!-- axios提交表单数据 -->
    <script>
        document.getElementById('loginFormId').addEventListener('submit', function(event) {
            event.preventDefault(); // 阻止表单默认提交行为
            // 获取username和password输入框的值
            var username = document.getElementById('username').value;
            var password = document.getElementById('password').value;
            // 创建一个包含要发送的数据的对象
            var data = {
                username: username,
                password: password
            };
            // 使用Axios发送POST请求
            axios.post('/login', data)
                .then(function(response) {
                    console.log("POST /login repsonse:");
                    console.log(response.data);

                    if (response.data.code === 0) {
                        // 处理响应
                        global_token = response.data.data;
                        if (global_token) {
                            // 将token值存到页面缓存中
                            localStorage.setItem("global_token", global_token);
                            // 重定向到首页
                            window.location.href = '/index';
                        } else {
                            alert(response.data.msg);
                        }

                    }

                })
                .catch(function(error) {
                    // 处理错误
                    console.error(error);
                });
        });
    </script>

</body>
</html>